const path = require('path');  // 使用npm ini命令，初始化生成package.json文件，该文件声明了需要哪些依赖，再使用npm install安装这些依赖

module.exports = {
    entry: './src/main.js',
    output: {
        //path: './dist',  // 需要使用绝对路径
        path: path.resolve(__dirname, 'dist'),  // 使用node获取绝对路径，__dirname是node中的全局变量，它是当前文件路径
        filename: 'bundle.js',
        publicPath: 'dist/', // 只要涉及url()资源，都会在路径前面加上dist/ ，这可以解决file-loader打包后由于路径问题页面加载不出图片
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                // css-loader只负责将css文件进行加载
                // style-loader负责将样式添加到DOM中
                use: ["style-loader", "css-loader"], // 使用多个loader时，是从右向左读的
            },
            {
                test: /\.less$/i,
                loader: [
                    // compiles Less to CSS
                    "style-loader",
                    "css-loader",
                    "less-loader",
                ],
            },
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            // 此处limit为图片大小*1024，例如：8Kb*1024 = 8192
                            // 当加载的图片小于limit时，会使用url-loader将图片编译成base64字符串形式
                            // 否则将使用file-loader
                            limit: 16000,
                            name: 'img/[name].[hash:8].[ext]', // 打包图片命名
                        },
                
                    },
                ],
            },
            {  // babel
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['es2015'] // npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
                  }
                }
              }
        ],
    },
}